<template>
  <section class="userlist-wrapper">
    <div v-for="(userInfo,index) in listUser" :key="index" class="u-card-wrapper">
      <userCard :user-info="userInfo" />
    </div>
    <el-pagination
      class="item-pagination"
      prev-text="上一页"
      next-text="下一页"
      :total="count"
      :page-size="5"
      layout="total, prev, pager, next"
    />
  </section>
</template>

<script>
import userCard from '@/components/UserCard/index.vue';
// api
import { getUserList } from '@/api/user';

export default {
  components: {
    userCard,
  },
  data() {
    return {
      count: 0,
      listUser: [],
    };
  },
  async mounted() {
    await this.getUserList();
  },
  methods: {
    async getUserList(page = 1) {
      const res = await getUserList({ page, size: 5 });
      this.listUser = res.data.rows;
      this.count = res.data.count;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.userlist-wrapper {
  width: $baseWidth;
  margin: auto;
  .u-card-wrapper {
    padding-bottom: 10px;
  }
}
</style>
